<template>
  <view class="bottom-card app-bottom-paddig" :style="{ paddingBottom: safeAreaInsetsBottom==0? '32rpx !important':'' }">
    <view class="deadline-bar" v-if="isInVotingPeriod">
      <u-image :src="clock" width="27" height="26"></u-image>
      <text class="deadline-text">截止时间：{{voteInfo.endDate}}</text>
    </view>
    <view class="bottom-content" >
      <button class="share-box share-btn" open-type="share">
          <u-icon name="share-square" color="#3C75FA" size="27px"></u-icon>
        <text class="share-text">分享</text>
      </button>
      <block >
        <view @click="handleClick" v-if="isVoting" 
         class="vote-btn-disabled"
         :class="isClick?'vote-btn':''">
          {{ voteButtonText || (isRevote ? '重新投票' : '投票') }}
        </view>
        <VotingCompleted :type="type" :isVotingInfo="isVotingInfo" v-else/>
       <view v-if="isCode&&!isVoting"  class="voting-completed-code" @click="handleCode" >
        <text class="voting-completed-code-text">查看记录</text>
        <view class="voting-completed-code-icon">   
            <u-icon name="arrow-right" color="#3B75FA" size="23rpx"></u-icon>
        </view>
       </view>
      </block>
    </view>
  </view>
</template>

<script>
import VotingCompleted from './VotingCompleted.vue'
import clock from '@/static/clock.svg'
import{mapState} from 'vuex'

export default {
  props:{
    voteInfo:{
      type:Object,
      default:''
    },
    isClick:{
      type:Boolean,
      default:false
    },
    isVotingInfo:{
      deep:true,
      immediate:true,
      type:Object,
      default:()=>{}
    },
    type:{
      type:String,
     
    },
    isCode:{
      type:Boolean,
      default:false
    },
    isRevote:{
      type:Boolean,
      default:false
    },
    voteButtonText:{
      type:String,
      default:''
    }
  },
  name: 'BottomCard',
  components: {
    VotingCompleted,
  },
  data(){
    return {
      clock,
      isActive: true
    }
  },
  computed: {
    ...mapState('app',['safeAreaInsetsBottom']),
    isVoting(){
      let status=this.isVotingInfo.status
      let isVoting=this.isVotingInfo.isVoting
      if(status==0 ||status==2){
        return false
      }
      if(isVoting){
        return false
      }
      return true
    },
    isInVotingPeriod() {
      const now = new Date()
      const start = new Date(this.voteInfo.startDate.replace(/-/g, '/'))
      const end = new Date(this.voteInfo.endDate.replace(/-/g, '/'))
      return now >= start && now <= end
    }
  },
 
  methods:{
    handleClick(){
      if(this.isClick){
        this.$emit('click')
      }
    },
    handleCode(){
     
      this.$emit('code')
    }
  },
 
}
</script>

<style scoped lang="scss">
.bottom-card {
  width: 100%;
  background: #fff;
  border-radius: 0 0 24rpx 24rpx;
 box-shadow: 0rpx -4rpx 8rpx 0rpx #5862770f;
  position: fixed;
  bottom: 0;

}
.deadline-bar {
  width: 100%;
  background: #FDEAEA;
  color: rgba(247, 36, 36, 0.1);
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(88,98,119,0.06);
  position: relative;
  

}
.deadline-text {
    font-weight: 400;
    font-size: 28rpx;
    color: #F72424;
    margin-left: 9rpx;
}
.bottom-content {
  display: flex;
  align-items: center;
  justify-content:center;
  padding: 16rpx 24rpx 0 24rpx;
  position: relative;
}
.share-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 32rpx;
  position: absolute;
  // left: 24rpx;
  left:10rpx
}
.share-text {
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    white-space: nowrap;
    line-height: 1;
 
}
.vote-btn-disabled {
  width: 606rpx;
  height: 88rpx;
  background: rgba(229, 229, 234, 1);
  color: rgba(153, 153, 153, 1);
  font-size: 30rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  margin-left: 48rpx;

}
.vote-btn{
  background: $uni-color-primary;
  color: #fff;
}
.voting-completed-code{
    position: absolute;
    top: 25rpx;
    right: 17rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #3B75FA;
    display: flex;
    align-items: center;
    justify-content: center;
}
.voting-completed-code-icon{
    position: relative;
    top: 0.5rpx;
}
.share-btn{
  width: 40px;
  border:none !important;
  background: none !important;
  &::after{
    border:none !important;
  }
}
</style>
